<template>
  <div class="popup">
    <div class="dialog">
      <img :src="img" />
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Popup",
  props: {
    // 内容
    img: {
      type: String,
      default: "",
      required: true,
    },
  },
  setup(props) {},
});
</script>
<style scoped lang="scss">
.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 1s both;
  .dialog {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 90%;
      max-height: 90%;
    }
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>